/*
 * @Description: 真实性格式设置弹窗
 * @Author: Rfan
 * @Date: 2022-10-10 20:45:23
 * @LastEditTime: 2022-10-22 17:22:50
 */

import { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, Modal, Space, Typography } from 'antd';
import classnames from 'classnames/bind';
import { selectItemByKey } from '@/utils/list';
import {
  EnumCheckContentType,
  EnumFieldCheckType,
  EnumIntegralityRuleType
} from '../../../../../../../../dictionaries';
import { CheckCircleFilled } from '@ant-design/icons';
import type { IRuleSetting } from '../../../../../../../../interface';
import styles from '../../../../../styles/entryPanes.module.scss';
import { IPropsRuleWithSetting } from '../../../../../../../../interface';

const cx = classnames.bind(styles);
interface IContinuityProps {
  data: any;
  onChange: any;
}

const Continuity = (props: IContinuityProps) => {
  const { data, onChange } = props;

  const [form] = Form.useForm();

  // 弹窗展示状态
  const [visible, setVisible] = useState(false);
  // icon显示状态
  const [iconState, setIconState] = useState(false);
  // 格式检测数据
  const [ruleData, setRuleData] = useState<IPropsRuleWithSetting<EnumIntegralityRuleType>>({
    ruleType: EnumIntegralityRuleType.ItemFieldValueContinuity,
    ruleValid: false,
    rule: {
      contentType: EnumCheckContentType.Regular,
      content: ''
    }
  });

  useEffect(() => {
    console.log('continuity data', data);
    if (data?.rules) {
      const itemData = selectItemByKey(
        EnumIntegralityRuleType.ItemFieldValueContinuity,
        data.rules,
        'ruleType'
      );
      if (itemData && itemData.rule) {
        setIconState(!!itemData.rule.content);
        setRuleData(itemData);
      }
    }
  }, [data]);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue(ruleData);
    }
  }, [visible]);

  // 提交表单
  const submitFunc = () => {
    form.submit();
  };

  // 保存值域设置
  const onFinish = (values: any, type?: 'checkbox') => {
    const fieldRuleType = EnumIntegralityRuleType.ItemFieldValueContinuity;
    const rule = type === 'checkbox' ? ruleData.rule : { ...ruleData.rule, ...values };

    const editLengthObj = {
      ruleType: fieldRuleType,
      ruleValid: type === 'checkbox' ? values.ruleValid : ruleData.ruleValid,
      rule
    };

    onChange(data.key, fieldRuleType, editLengthObj);
    closeDialog();
  };

  /**
   * @description: 复选框变化事件
   * @param {any} evt
   */
  const checkboxChange = (evt: any) => {
    onFinish({ ruleValid: evt.target.checked }, 'checkbox');
  };

  /**
   * @description: 关闭弹窗
   */
  const closeDialog = () => {
    setVisible(false);
  };

  return (
    <>
      <Space size={2}>
        <Checkbox checked={ruleData.ruleValid} onChange={checkboxChange} />
        <div className={cx('btn-with-state')}>
          <Button
            type="link"
            size="small"
            onClick={() => {
              setVisible(true);
            }}
          >
            连续性设置
          </Button>
          {iconState && <CheckCircleFilled className={cx('success')} />}
        </div>
      </Space>

      <Modal
        destroyOnClose
        title="连续性设置"
        visible={visible}
        width={350}
        onCancel={() => {
          closeDialog();
        }}
        footer={[
          <Button
            key="back"
            onClick={() => {
              closeDialog();
            }}
          >
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={submitFunc}>
            确定
          </Button>
        ]}
      >
        <Typography.Text type="warning">注意：受检测内容一定为数值</Typography.Text>
        <Form
          form={form}
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 17 }}
          preserve={false}
          onFinish={onFinish}
        >
          <Form.Item label="设定起始号" name="content">
            <Input placeholder="请设定数据起始值" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Continuity;
